<template>
  <div class="person">
    <h2>汽车信息：一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changePrice"> +10 修改汽车的价格</button>
    <button @click="changCar"> 修改汽车</button>
    <br>
    <h2> 当前求和 ： {{ sum }}</h2>
    <button @click="changeSum">点我求和+1</button>
    <hr>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script lang="ts" setup >
import { ref , reactive} from 'vue'


/*
ref 和 reactive 的区别 : 

ref 定义的对象类型数据
  可以直接修改对象内部的属性
  也可以整体替换对象 ,注意替换的时候 需要添加 .value = {xx:xxx,xxxx:xxx}

reactive 定义的对象类型数据
  只能修改对象内部的属性
  不能整体替换对象 , 可以使用 Object.assign() 方法替换对象内部的属性
*/
// 数据
let car = ref({ brand: '奔驰', price: 100 })
let sum = ref(0)


// 方法
function changePrice() {
    car.value.price += 10
    // console.log(car.value.price)
}

function changeSum() {
    sum.value += 1
}


function changCar() {
  // ref 的定义 可以直接修改 ，可以直接覆盖 可以保证响应式 
    car.value = { brand: '奥迪A6', price: 200 }
    console.log(car)
}

</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>